<template lang="jade">
#search
  //- .header
    a.backup.icon-angle-left(href='javascript:history.go(-1)')
    h1.page-title 图书检索
  .seperate
  form
    .form-item.weui-flex.dropdown
      .weui-flex__item
        span.caret
        select.weui-select(v-model='fieldname')
          option(v-for='(item, index) in options.fields', :value='item.value') {{item.name}}
      //- i.icon-sort-down
    //- .form-item.weui-flex.dropdown
      .weui-flex__item
        select.weui-select(v-model='library', aria-name='选择图书馆')
          option(v-for='(item, index) in libraries', :value='item.ZoneId') {{item.ZoneName}}
      i.icon-sort-down
    //- .form-item
      label.weui-flex(for='showcover')
        .weui-flex__item 在搜索结果中显示封面
        div
          input#showcover.weui-check(type='checkbox', v-model='showCover')
          i.icon-ok
    .form-item
      input(placeholder='请输入检索内容', type='text', v-model='searchKeyword')
    button.btn-blue.weui-btn.weui-btn_primary(@click.prevent.stop="search") 检索
  router-view
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  data () {
    return {
      searchKeyword: '',
      fieldname: 'title',
      library: '',
      showCover: false,
      options: {
        fields: [{
          name: '题名',
          value: 'title'
        },
        {
          name: '著者',
          value: 'author'
        },
        {
          name: '出版社',
          value: 'pub'
        },
        {
          name: 'ISBN',
          value: 'isbn'
        }]
      }
    }
  },
  computed: {
    ...mapGetters({
      'searchItem': 'searchItem'
    })
  },
  mounted () {
    this.searchKeyword = this.searchItem.keyword
    this.fieldname = this.searchItem.keyname
  },
  methods: {
    search () {
      if (this.searchKeyword.length === 0) {
        // 提示没有输入关键词
      } else {
        // 进行搜索
        this.$router.push({
          name: 'searchResult',
          params: {
            keyword: this.searchKeyword
          },
          query: {
            fieldname: this.fieldname,
            pagenum: 1
          }
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.form-item {
  &.dropdown {
    padding: 0;

    .caret {
      position: absolute;
      right: 15px;
      top: 50%;
      margin-top: -2px;
    }
  }
  .icon-sort-down {
    padding: 0.2rem;
  }
  input {
    width: 100%;
  }
}
</style>
